<template>
  <div class='add-tag'>
    <el-dialog :append-to-body="true" :visible.sync="dialogFormVisible"
    :title="this.form.id?'修改标签':'新增标签'">
      <el-form :model="form"  :rules="formRules">
        <el-form-item label="所属学科" v-if="!this.$route.query.id" prop="subjectID">
          <el-select v-model="form.subjectID" placeholder="请选择"  style="width:80%;">
            <el-option v-for="item in subjects" :key="item.value"
             :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tagName">
          <el-input v-model="form.tagName" placeholder="请输入标签名称" style="width:80%;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" v-if="!form.id" @click="addTags">确定添加</el-button>
        <el-button type="primary" v-if="form.id" @click="editTags">确定修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/tags'
// 获取学科列表
import { simple as subjectList } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      subjects: [],
      form: {
        id: null,
        subjectID: null,
        tagName: ''
      },
      dialogFormVisible: false,
      formRules: {
        subjectID: [
          { type: 'number', message: '请选择所属学科', tirgger: 'blur' }
        ],
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 打开对话框
    open () {
      this.dialogFormVisible = true
      console.log(this.form.id)
    },
    // 接收当前行信息
    revise (params) {
      console.log('接收的当前行信息', params.row)
      this.form.id = params.row.id
      this.form.tagName = params.row.tagName
      this.form.subjectID = params.row.subjectID
    },
    // 学科下拉
    getSubject () {
      subjectList().then(res => {
        // console.log(res)
        this.subjects = res.data
      })
    },
    // 添加
    addTags () {
      const data = {
        subjectID: this.form.subjectID || Number(this.$route.query.id),
        tagName: this.form.tagName
      }
      add(data).then(res => {
        console.log(res)
        this.dialogFormVisible = false
        this.$emit('render')
        this.form.subjectID = null
        this.form.tagName = null
      })
    },
    // 取消
    cancel () {
      this.dialogFormVisible = false
      this.form.subjectID = null
      this.form.tagName = null
    },
    // 修改
    editTags () {
      const data = {
        id: this.form.id,
        subjectID: this.form.subjectID,
        tagName: this.form.tagName
      }
      update(data).then(res => {
        console.log(res)
        this.dialogFormVisible = false
        this.$emit('render')
        this.form.subjectID = null
        this.form.tagName = null
      })
    }
  },
  mounted () {
    this.getSubject()
  }
}
</script>

<style scoped lang='scss'></style>
